<!-- 首页 -->
<template>
    <div class="tabs-list">
        <div class="tabs-item" :class="item.id == active ? 'tabs-item-current' : ''" v-for="item in props.tabsList"
            :key="item.id" @click="tabsChange(item)">
            <span>
                {{ item.name }}
            </span>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { GetRecommendPage, GetNewPhotosPage } from "@/api/index";

const route = useRoute();

const props = defineProps({
    tabsList: {
        type: Array,
        default: () => [],
    },
    activeItem:{
        type:Number,
        default:1
    }
});

const emit = defineEmits(["click"]);

const state = reactive({
    goodsList: [],
});

const { goodsList, tabsList } = toRefs(state);

const goodsListLeft = computed(() =>
    state.goodsList.filter((o, i) => i % 2 == 0)
);
const goodsListRight = computed(() =>
    state.goodsList.filter((o, i) => i % 2 == 1)
);

const router = useRouter();

let active = ref(1);
active.value = props.activeItem

const tabsChange = (item) => {
    active.value = item.id
    emit("click", item.id);
};
</script>


<style lang="scss" scoped>
.tabs-list {
    display: flex;
    align-items: center;

    .tabs-item {
        margin-right: 20px;

        span {
            padding-bottom: 15px;
            position: relative;
            padding-bottom: 10px;
            font-size: 18px;

            &:before {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                display: inline-block;
                width: 100%;
                height: 4px;
                border-radius: 4px;
            }
        }
    }

    .tabs-item-current {
        color: $default-color;

        span {
            font-weight: 600;

            &:before {
                background: linear-gradient(to right, $default-color-l, $default-color-r);
            }
        }
    }
}
</style>